<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Palette</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var values = {
            number: 1,
            string: 200,
            checkbox: true,
            list: 'Two',
            text: 'Hello World!'
        };
        var components = {
            number: {
                type: 'number',
                label: 'A Number',
                step: 2.5
            },
            string: {
                type: 'string',
                label: 'A String'
            },
            checkbox: {
                type: 'boolean',
                label: 'A Checkbox',
                onChange: function(value) {
                    values.list = value ? 'Two' : 'One';
                }
            },
            list: {
                type: 'list',
                label: 'A List',
                options: [ 'One', 'Two', 'Three' ]
            },
            text: {
                type: 'text',
                label: 'A Text'
            },
            button: {
                type: 'button',
                label: 'A Button',
                value: 'Click Me!',
                onClick: function() {
                    console.log('Resetting');
                    palette.reset();
                    values.text = 'You clicked!';
                }
            },
            slider: {
                type: 'slider',
                label: 'A Slider',
                value: 10,
                range: [0, 50],
                step: 10
            }
        };
        var palette = new Palette('Values', components, values);
        palette.onChange = function(component, name, value) {
            console.log(name + ' = ' + value, component);
        }
        values.number = 10;
        values.string = 'Woop woop';
        values.list = 'Three';
        console.log(JSON.stringify(values));
    </script>
</head>
<body>
    <canvas id="canvas" width="640" height="100"></canvas>
</body>
</html>
